{% extends 'base.html' %}
{% block title %}Brisbane Coupon{% endblock %}
{% block stylesheet %}
{{ block.super }}
{% endblock%}

{% block javascript %}
{{ block.super }}
{% endblock%}

{% block content %}
  <div id="dLayout">
    <div id="dSearch">
      <form method="get" action="">
      {{ search_form.q }}
      </form>
    </div> <!-- end dSearch-->
          
  </div> <!-- end dLayout-->
  
  <div id="dWrapper">
    <div id="main" role="main">
      <ul id="tiles" class="transitions-enabled infinite-scroll clearfix">
        {% if objects %}
        {% load thumbnail %}
        {% endif %}
        {% for s in objects %}
        <li>
          <div id="dSmBoxIn">
            <span id="dStore2" >
              <span class="cSClass"><a href="{{ s.category.url }}">{{ s.category.name }}</a></span>
              <a href="{{ s.url }}" target="_blank">[Promotion]{{ s.name }}</a>
            </span>
          </div>
          <div id="dLineBg" class="cBg0">{{s.representative|safe }}</div>
          <div class="cPhoto">
            {% thumbnail s.thumbnail "270x200" as im %}
            <a href="{{ s.url }}" target="_blank"><img src="{{ im.url }}" /></a>
            {% endthumbnail %}
          </div>
          {% for e in s.get_aevents %}
          <div id="dLineBg" class="cBg0">
            <span class="cEventin">EVENT</span>
            <span class="cvEDescription">
              <a href="{{ e.url }}" target="_blank">{{ e.name }}</a> 
            </span>
          </div>
          {% empty %}
          <div id="dLineBg" class="cBg0">
            <span class="cEventin">EVENT</span>
            <span class="cvEDescription">
              <a href="{{ e.url }}" target="_blank">이벤트가 없습니다.</a> 
            </span>
          </div>
          {% endfor %}
          
          {% if s.addr %}
          <div id="dAddress">
            <a href="{{ s.url }}" target="_blank">{{ s.addr }}</a>
          </div>
          {% endif %}
        </li>
        {% endfor %}
      </ul>
    </div> <!-- end main-->
  
  
    
  </div> <!-- end dWrapper-->
  
<script type="text/javascript" src="{{ STATIC_PREFIX }}js/d/jquery.wookmark.js"></script>
<script type="text/javascript" src="{{ STATIC_PREFIX }}js/d/mosaic.1.0.1.js"></script>
<script type="text/javascript">

var handler = null;

// Prepare layout options.
var options = {
  autoResize: true, // This will auto-update the layout when the browser window is resized.
  container: $('#main'), // Optional, used for some extra CSS styling
  offset: 20, // Optional, the distance between grid items
  itemWidth: 300 // Optional, the width of a grid item
};

var pageNum = 1;

/**
 * When scrolled all the way to the bottom, add more tiles.
 */
function onScroll(event) {
  // Check if we're within 100 pixels of the bottom edge of the broser window.
  var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
  if(closeToBottom) {
    //console.log(pageNum);
    var address = 'increase/?page=' + pageNum + '&{{ url_arguments.encode_without_page }}';
    $.get(address, function(data) {
        $('#tiles').append(data);
    })
    .success(function() {})
    .error(function() {})
    .complete(function() { 
        $('.bar').mosaic({
            animation: 'slide'
        });
        // Clear our previous layout handler.
        if(handler) handler.wookmarkClear();
            
        // Create a new layout handler.
        handler = $('#tiles li');
        handler.wookmark(options);
    });
    pageNum += 1;
  }
};

$(document).ready(new function() {
  // Capture scroll event.
  $(window).bind('scroll', onScroll);
  
  // Call the layout function.
  handler = $('#tiles li');
  handler.wookmark(options);
  
  var address = 'increase/?page=' + pageNum + '&{{ url_arguments.encode_without_page }}';
  $.get(address, function(data) {
      $('#tiles').append(data);
  })
  .success(function() {})
  .error(function() {})
  .complete(function() { 
      $('.bar').mosaic({
          animation: 'slide'
      });
      // Clear our previous layout handler.
      if(handler) handler.wookmarkClear();
          
      // Create a new layout handler.
      handler = $('#tiles li');
      handler.wookmark(options);
  });
  pageNum += 1;

});
</script>
  
{% endblock %}
